<template>
  <div class="ratings" ref="ratings">
    <div>
      <div class="seller-info">
        <div class="total-score">
          <div class="score">{{seller.score}}</div>
          <div class="text">综合评分</div>
          <div class="rankRate"><span v-show="seller.rankRate>=0">高</span><span v-show="seller.rankRate<0">低</span>于周边商家{{seller.rankRate}}</div>
        </div>
        <div class="star-score">
          <div class="service">
            <span class="text">服务态度</span><star :score="seller.serviceScore" :size="36"></star><span class="digital">{{seller.serviceScore}}</span>
          </div>
          <div class="food">
            <span class="text">商品评分</span><star :score="seller.foodScore" :size="36"></star><span class="digital">{{seller.foodScore}}</span>
          </div>
          <div class="delivery">
            <span class="text">送达时间</span><span class="text delivery-time">{{seller.deliveryTime}}分钟</span>
          </div>
        </div>
      </div>
      <divide></divide>
      <div class="ratings-info">
        <div class="rating-type">
          <span @click="wholeFunc" class="whole" :class="{choose:wholeFlag}"><span  class="text">全部</span><span class="count">{{ratings.length}}</span></span>
          <span @click="recommendFunc" class="recommend" :class="{choose:recommendFlag}"><span class="text">推荐</span><span class="count">{{recommendCount}}</span></span>
          <span @click="complainFunc" class="complain" :class="{choose:complainFlag}"><span class="text">吐槽</span><span class="count">{{complainCount}}</span></span>
        </div>
        <div class="only-content">
          <span @click="onlyFunc" :class="{choose:onlyFlag}" class="icon icon-check_circle"></span>
          <span class="text">只看有内容的评价</span>
        </div>
        <div class="rating-wrapper">
          <ul>
            <li v-for="item in choosedContent">
              <rating-page-content :rating="item"></rating-page-content>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import star from '../star/star.vue'
  import divide from '../divide/divide.vue'
  import ratingPageContent from '../ratingPageContent/ratingPageContent.vue'
  import IScroll from 'iscroll'
  export  default{
    props:{
      seller:{
        type:Object
      }
    },
    data() {
      return{
        wholeFlag:true,
        recommendFlag: false,
        complainFlag:false,
        onlyFlag: false,
        scroll:null,
        ratings: []
      }
    },
    created() {
      this.$http.get('api/ratings').then( (res) => {
        res = res.data;{
          if(res.errno == 0){
            this.ratings = res.data;
            this.$nextTick(() => {
              if(!this.scroll){
                this.scroll = new IScroll(this.$refs.ratings);
              }
              else{
                this.scroll.refresh();
              }
            });
          }
        }
      });
    },
    methods:{
      wholeFunc() {
        this.wholeFlag = true;
        this.recommendFlag = false;
        this.complainFlag = false;
        this.$nextTick(() => {
          if(this.scroll){
            this.scroll.refresh();
          }
        });
      },
      recommendFunc() {
        this.wholeFlag = false;
        this.recommendFlag = true;
        this.complainFlag = false;
        this.$nextTick(() => {
          if(this.scroll){
            this.scroll.refresh();
          }
        });
      },
      complainFunc() {
        this.wholeFlag = false;
        this.recommendFlag = false;
        this.complainFlag = true;
        this.$nextTick(() => {
          if(this.scroll){
            this.scroll.refresh();
          }
        });
      },
      onlyFunc(){
        this.onlyFlag = !this.onlyFlag;
        this.$nextTick(() => {
          if(this.scroll){
            this.scroll.refresh();
          }
        });
      }
    },
    computed: {
      choosedContent() {
        let arr = [];
        let result = [];
        if(this.wholeFlag && !this.onlyFlag){
          arr = this.ratings;
        }
        else if(this.wholeFlag && this.onlyFlag ){
          this.ratings.forEach( (rating) => {
            if (rating.text){
              arr.push(rating);
            }
          });
        }
        else if(this.recommendFlag && !this.onlyFlag){
          this.ratings.forEach( (rating) => {
            if (rating.rateType == 0){
              arr.push(rating);
            }
          });
        }
        else if(this.recommendFlag && this.onlyFlag){
          this.ratings.forEach( (rating) => {
            if (rating.rateType == 0 && rating.text){
              arr.push(rating);
            }
          });
        }
        else if(this.complainFlag && !this.onlyFlag){
          this.ratings.forEach( (rating) => {
            if (rating.rateType == 1){
              arr.push(rating);
            }
          });
        }
        else if(this.complainFlag && this.onlyFlag){
          this.ratings.forEach( (rating) => {
            if (rating.rateType == 1 && rating.text){
              arr.push(rating);
            }
          });
        }
        result = arr;
        arr=[];
        return result;
      },
      recommendCount() {
        let count = 0;
        if(this.ratings){
          this.ratings.forEach((rating) => {
            if (rating.rateType == 1){
              count ++;
            }
          });
        }
        return count;
      },
      complainCount() {
        let count = 0;
        if(this.ratings){
          this.ratings.forEach((rating) => {
            if (rating.rateType == 0){
              count ++;
            }
          });
        }
        return count;
      },
      wholeCount() {
        if(this.ratings){
          return this.ratings.length;
        }
        else{
          return 0;
        }
      }
    },
    components:{
      star,
      divide,
      ratingPageContent
    }

  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "../../common/mixin";
  .ratings{
    position: absolute;
    top: 174px;
    bottom: 0;
    width: 100%;
    overflow: hidden;
  }
  .seller-info{
    display: flex;
    margin: 18px 0;
    font-family: "Microsoft YaHei";
    .total-score{
      flex: 0 0 137px;
      border-right: 1px solid rgba(7,17,27,0.1);
      &>div{
        text-align: center;
      }
      .score{
        font-size: 24px;
        line-height: 28px;
        color: rgb(255, 153, 0);
        margin-bottom: 6px;
      }
      .text{
        font-size: 12px;
        color: rgb(7,17,27);
        line-height: 18px;
        margin-bottom: 8px;
      }
      .rankRate{
        font-size: 10px;
        line-height: 10px;
        color: rgb(147,153,159);
      }
    }
    .star-score{
      flex: 1;
      padding: 0 24px;
      &>div{
        margin-bottom: 8px;
        &:last-child{
          margin-bottom: 0;
        }
      }
        .text,.digital{
          font-size: 12px;
          line-height: 17px;
          color: rgb(7,17,27);
          vertical-align: top;
        }
      .digital{
        color: rgb(255,153,0) ;
      }
      .star{
        margin: 0 12px;
      }
      .delivery-time{
        margin-left: 12px;
        color: rgb(147,153,159);
      }
    }
  }
  .ratings-info{
    margin: 0 18px;
    .rating-type{
      padding-bottom: 18px;
      margin-top: 12px;
      @include border-1px(rgba(7,17,27,0.1));
      & > span{
        display: inline-block;
        margin-left: 8px;
        color: rgb(77,85,93);
        font-size: 12px;
        padding: 8px 12px;
        &:first-child{
          margin-left: 0;
        }
      }
      .whole , .recommend{
        background-color: rgba(0,160,220,0.2) ;
        &.choose{
          background-color: rgb(0,160,220) ;
          color: #ffffff;
        }
      }
      .complain{
        background-color: rgba(77,85,93,0.2);
        &.choose{
          background-color: rgb(77,85,93) ;
          color: #ffffff;
        }
      }
    }
    .only-content{
      padding: 12px 0;
      @include border-1px(rgba(7,17,27,0.1));
      .icon{
        font-size: 24px;
        color: rgb(147,153,159);
        line-height: 24px;
        &.choose{
          color: #00C850;
        }
      }
      .text{
        font-size: 12px;
        color: rgb(147,153,159);
        line-height: 25px;
        vertical-align: top;
      }
    }
  }

</style>
